<!-- 用户添加弹框 -->
<template>
    <el-form ref="addUserFormRef" :rules="userData.form_rules" :model="userData.form" label-width="110px">
        <el-form-item label="用户名" size="large" prop="username">
            <el-input size="large" v-model="userData.form.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input size="large" prefix-icon="Lock" :show-password="true" v-model="userData.form.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
            <el-input size="large" v-model="userData.form.realName" placeholder="请输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
            <el-input size="large" v-model="userData.form.phoneNumber" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="Email" prop="email">
            <el-input size="large" v-model="userData.form.email" placeholder="请输入Email"></el-input>
        </el-form-item>
        <el-form-item label="是否超级管理员">
            <el-switch @change="superAdminHandler" v-model="userData.form.superAdmin" inline-prompt active-text="是" inactive-text="否" />
        </el-form-item>
        <el-form-item v-if="!userData.form.superAdmin" label="角色分配" prop="roleList">
            <el-select :clearable="true" @change="roleHandler" v-model="userData.form.roleList" multiple placeholder="请选择" style="width: 240px">
                <el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm()">提交</el-button>
            <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import sha1 from "js-sha1"
import { reactive, ref , getCurrentInstance} from 'vue'
import { addUser } from "@/api/user"
export default {
    props: {
        roleData: {
            type: Array,
            default: []
        }
    },
    setup(props , context) {
        let roleList = props.roleData

        // console.log("添加用户roleList：",props.roleData)
        // 获取实例上下文
        const { proxy } = getCurrentInstance();
        const userData = reactive({
            form: {
                // 用户名
                username: "",
                // 密码
                password: "",
                // 真实姓名
                realName: "",
                // 是否超级管理员
                superAdmin: ref(false),
                // email
                email: "",
                // 手机号
                phoneNumber: "",
                // 用户所属角色
                roleList: ref([]), 
            },
            form_rules: {
                username: [
                    {
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    },
                    {
                        min: 6,
                        message: '密码至少6个字符',
                        trigger: 'blur'
                    }
                ],
                realName: [
                    {
                        required: true,
                        message: '请输入真实姓名',
                        trigger: 'blur'
                    }
                ],
                phoneNumber: [
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    }
                ],
                roleList: [
                    {
                        required: true,
                        message: '请给用户添加角色',
                        trigger: 'blur'
                    }
                ]
            },
        })

        const roleHandler = (roleArray) => {
            console.log("选择了：",roleArray)
            userData.form.roleList = roleArray
        }
        const superAdminHandler = (value) => {
            userData.form.superAdmin = value
        }

        const submitForm = () => {
            proxy.$refs.addUserFormRef.validate(async (valid) => {
                if (!valid) {
                    return;
                }
                const requestData = {
                    // 用户名
                    username: userData.form.username,
                    // 密码
                    password: sha1(userData.form.password),
                    // 真实姓名
                    realName: userData.form.realName,
                    // 是否超级管理员
                    superAdmin: userData.form.superAdmin,
                    // email
                    email: userData.form.email,
                    // 手机号
                    phoneNumber: userData.form.phoneNumber,
                    // 用户所属角色
                    roleList: userData.form.roleList, 
                    // 头像
                    headImage: "images/default-head-image.png",
                }
                const data = await addUser(requestData)
                console.log("添加结果：" , data)
                if (data.code !== 200) {    // 添加不成功
                    return
                } else {
                    ElMessage({
                        message: data.msg,
                        type: "success"
                    })
                    // 重置表单
                    resetForm()
                    // 通知父组件
                    context.emit('addResult' , true)
                    return;
                }
            })
        }

        /**
         * 表单重置
         */
        const resetForm = () => {
            userData.form.roleList.length = 0
            userData.form.superAdmin = false
            proxy.$refs.addUserFormRef.resetFields()
        }

        return {
            userData,
            roleList,
            superAdminHandler,
            roleHandler,
            submitForm,
            resetForm
        }

    }
}
</script>

<style lang="scss" scoped></style>